<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="团队信息" name="basic">
          <el-form :model="info" label-width="150px" label-position="left">
            <el-row>
              <el-col :span="12">
                <el-form-item label="团队ID" prop="id">
                  <span>{{ info.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="累计使用学术币" prop="currency">
                  <span>{{ info.currency }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="团队名称" prop="groupName">
                  <span>{{ info.groupName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="团队折扣" prop="discount">
                  <span>{{
                    info.discount && info.discount != 100
                      ? accMul(info.discount, 0.1) + "折"
                      : "无"
                  }}</span>
                  <el-button size="mini" @click="zkVisible = true"
                    >设置</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="团长姓名" prop="regimental">
                  <span>{{ info.regimental }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="团队成员" prop="teamCount">
                  <span>{{ info.teamCount }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                  <span>{{ info.phone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间" prop="createTime">
                  <span>{{ info.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                  <span>{{ info.email }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="科藤备注" prop="remark">
                  <el-input
                    type="textarea"
                    :rows="3"
                    v-model="info.remark"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="团队成员" name="teamuser">
          <el-table
            ref="dragTable"
            :data="columns"
            row-key="id"
            :max-height="tableHeight"
          >
            <el-table-column
              label="用户ID"
              prop="id"
              min-width="15%"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              label="姓名"
              prop="realName"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              label="微信号"
              prop="wxCode"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.wxCode ? scope.row.wxCode : "无" }}
              </template>
            </el-table-column>
            <el-table-column
              label="手机号"
              prop="mobile"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              label="邮箱"
              prop="email"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              label="单位"
              prop="organizationCode"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              label="身份"
              prop="identityName"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              label="加入时间"
              prop="addTime"
              min-width="10%"
              :show-overflow-tooltip="true"
              align="center"
            />
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="团队订单" name="teamorder">
          <el-table :data="orderData" style="width: 100%;">
            <el-table-column
              prop="userId"
              label="用户ID"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="userName"
              label="姓名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="orderNumber"
              label="订单编号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="serviceTypeName"
              label="服务类型"

              align="center"
            ></el-table-column>
            <el-table-column
              prop="orderDate"
              label="下单时间"
              align="center"
            ></el-table-column>
            <!-- <el-table-column prop="urgent" label="是否加急" :formatter="getUrgentText" align="center"></el-table-column> -->
            <el-table-column
              prop="orderStatus"
              label="订单状态"
              :formatter="getOrderStatusText"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="serviceStatus"
              label="服务状态"
              :formatter="getServiceStatusText"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="handler"
              label="处理人"
              align="center"
            ></el-table-column>
            <el-table-column prop="handleDate" label="处理日期" align="center">
              <template slot-scope="scope">
                {{ timestampToDate(scope.row.handleDate) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <zk-dialog
      :visible="zkVisible"
      title="团队折扣"
      onceLabel="团队名称"
      :id="info.id"
      :onceContent="info.groupName"
      :twiceContent="
        info.discount && info.discount !== 100 ? info.discount / 10 : null
      "
      oncePlaceholder="获取团队名称失败"
      :onceDisabled="true"
      twiceLabel="团队折扣"
      twicePlaceholder="请设置团队折扣"
      twiceType="number"
      @cancel="zkVisible = false"
      @confirm="zkConfirm"
    >
    </zk-dialog>

    <div class="page-footer">
      <el-button @click="close()">关闭</el-button>
      <el-button
        type="primary"
        @click="submitForm()"
        v-show="activeName === 'basic'"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getInfo,
  updateTeam,
  userListTable,
  orderListTable,
} from "@/api/team/information";
import { getFileList, deleteFile } from "@/api/edit/edit";
import { timestampToDate } from "@/utils/time";
import { accMul } from "@/utils/math";
import { Message } from "element-ui";
export default {
  name: "showTable",
  components: {
    ZkDialog: () => import("@/components/zkDialog/index.vue"),
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "basic",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 字典信息
      dictOptions: [],
      // 菜单信息
      menus: [],
      dateRange: "",
      orderData: [
        // 这里放入你的数据对象，包含所有字段
      ],
      // 表详细信息
      info: {},
      dialogVisible: false,
      fileList: [
        // 你的文件列表数据，可以从后端获取或模拟数据
        // {
        //   fileName: 'file1.txt',
        //   fileSize: '10MB',
        //   uploadTime: '2024-01-08 09:00:00'
        // },
        // 其他文件数据
      ],
      zkVisible: false,
    };
  },
  created() {
    const tableId = this.$route.params && this.$route.params.tableId;
    if (tableId) {
      // 获取表详细信息
      getInfo(tableId).then((res) => {
        this.info = res.data;
      });
      userListTable(tableId).then((res) => {
        this.columns = res.rows;
      });
      orderListTable(tableId).then((res) => {
        this.orderData = res.rows;
      });
    }
  },
  methods: {
    accMul,
    timestampToDate,
    /** 提交按钮 */
    submitForm() {
      updateTeam(this.info).then((res) => {
        this.$modal.msgSuccess(res.msg);
        if (res.code === 200) {
          this.close();
        }
      });
    },
    beforeCloseHandler(done) {
      // 在这里执行你想要的操作
      console.log("对话框即将关闭");

      // 调用 done() 表示可以关闭对话框，不调用则会阻止对话框关闭
      done();
      const tableId = this.$route.params && this.$route.params.tableId;
      if (tableId) {
        // 获取表详细信息
        getInfo(tableId).then((res) => {
          this.info = res.data;
        });
        userListTable(tableId).then((res) => {
          this.columns = res.rows;
        });
      }
    },

    zkConfirm(id, discount) {
      updateTeam({
        ...this.info,
        discount: discount ? discount * 10 : 100,
      }).then((res) => {
        Message.success("修改成功");
        this.info.discount = discount ? discount * 10 : 100;
        this.zkVisible = false;
      });
    },

    getOrderStatusText(row) {
      const statusMap = {
        "-1": "已取消",
        0: "待定价",
        1: "已定价",
        2: "待支付",
        3: "待确认",
        4: "处理中",
        5: "待派稿",
        6: "已返稿",
        7: "返回编辑确认",
        8: "待审核未通过",
        9: "已确认",
        10: "已完成",
      };
      return statusMap[row.orderStatus] || "未知状态";
    },
    getUrgentText(row) {
      const statusMap = {
        0: "否",
        1: "是",
      };
      return statusMap[row.urgent] || "未知状态";
    },
    getServiceTypeText(row) {
      const typeMap = {
        0: "基础服务",
        1: "数据作图与科研绘图服务",
        // 可以根据实际情况添加更多类型映射
      };
      return typeMap[row.serviceType] || "未知类型";
    },
    getServiceStatusText(row) {
      const statusMap = {
        0: "正常",
        1: "反馈",
        2: "售后",
        // 根据实际情况添加更多状态映射
      };
      return statusMap[row.serviceStatus] || "未知状态";
    },
    handleStatusChange(row) {},
    showFile(row) {
      this.dialogVisible = true;
      var query = { id: row.id };
      console.log(query);
      getFileList(query).then((res) => {
        this.fileList = res.rows;
      });
    },
    getFormPromise(form) {
      return new Promise((resolve) => {
        form.validate((res) => {
          resolve(res);
        });
      });
    },
    handleDownload(row) {
      // 处理下载逻辑
      console.log("下载文件：", row.file);
      window.open(
        "https://keteng-ps.oss-cn-hangzhou.aliyuncs.com" + row.filePath,
        "_blank"
      );
    },
    handleDelete(row) {
      this.$confirm(`确定要删除文件：${row.fileName}？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确认删除，执行相应的删除逻辑
          deleteFile(row.id).then((res) => {
            this.$modal.msgSuccess(res.msg);
            if (res.code === 200) {
              const index = this.fileList.findIndex(
                (item) => item.id === row.id
              );
              if (index !== -1) {
                this.fileList.splice(index, 1); // 从数组中删除指定索引的元素
              }
            }
          });
          console.log("删除文件：", row.fileName);
          // 这里添加具体的删除文件逻辑
        })
        .catch(() => {
          // 取消删除
        });
    },

    /** 关闭按钮 */
    close() {
      const obj = {
        path: "/team/information",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
    },
  },
  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(
      ".el-table__body-wrapper > table > tbody"
    )[0];
  },
};
</script>

<style scoped>
.page-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-body {
  flex: auto;
}

.page-footer {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #eee;
}
</style>
